<template>
    <div class="classMessage">
        <div class="top">
            <img :src="titleImg" alt="" class="titleImg">
            <div class="topMiddle">
                <h1>{{topTitle}}</h1>
                <h6>
                    <span>{{`累计${navTitle}人学习` }}</span>
                    <el-rate
                            v-model="value"
                            disabled
                            show-score
                            text-color="#FFFFDA12"
                            score-template="{value}">
                    </el-rate>
                </h6>
                <br>
                <div v-show=isFree class="free">免费</div>
                <div v-show=!isFree class="unFree"><span>￥{{discountPrice}}</span><span>￥{{coursePrice}}</span></div>
                <!--                限时钜惠-->
                <div class="discountDesc" v-show=!isFree>限时钜惠</div>
                <div class="buyButton">
                    <button class="greenColor" v-show=isFree>立即观看</button>
                    <button class="orignColor" v-show=!isFree>立即购买</button>
                    <button class="greenColor" v-show=!isFree>加入购物车</button>
                </div>
            </div>
        </div>
        <div class="bottom">
            <!--            总体的分页栏-->
            <div class="bottomIn">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="课程描述" name="first">
                        <div v-html="courseDetail" class="detailedText"></div>
                    </el-tab-pane>

                    <el-tab-pane label="目录" name="second">
                        <div class="catalogue" v-for="v in dataAll.sections" :key="v.sectionName">
                            <div class="bigTitle">
                                <span>{{v.sectionName}}</span>
                                <button><span class="el-icon-lightning"></span>下载</button>
                            </div>
                            <ul v-for="value in v.subSections" :key="value.sectionName">
                                <li class="smallTitle">
                                    {{value.sectionName}}
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="评论" name="third">
                        <commen></commen>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    // <!--    静态图片，尚未请求-->
    // import img from "../../../assets/1-class.png"
    import {getClass} from "../../../api";
    // import {comment} from "../../../api";
    import nos from "../../../assets/个人_fill.png"
    import commen from "./commen";

    export default {
        name: "classMessage",
        props: {
            // message: Object
        },
        data() {
            return {
                // allData:"",
                //图片地址
                titleImg: "",
                //大标题
                topTitle: "",
                // 小标题
                navTitle: "",
                value: 5,
                //    是否免费，以及价格
                isFree: true,
                coursePrice: 100,
                discountPrice: 10,
                activeName: 'first',
                //    文本
                courseDetail: "",
                //循环时候用的全部数据
                dataAll: {},
                // catalogueTitle:[]
                value1: 5,
                colors: ['#99A9BF', '#f7e32a', '#ffc900'],
                //头像
                nos: nos,
                //    评论的全部数据
                commentAll: {},
                commentTotalNum:0
            }
        },
        methods: {
            getData() {
                console.log(this.message)
            },
            handleClick(tab, event) {
                tab
                event
            }
        },
        created() {
            getClass(this.$route.query.id).then(res => {
                // console.log(res.data)
                this.allData = res.data
                this.titleImg = res.data.bannerFileUrl
                this.topTitle = res.data.courseTitle
                this.navTitle = res.data.participationsCount
                this.isFree = Number(res.data.isFree)
                this.coursePrice = res.data.coursePrice
                this.discountPrice = res.data.discountPrice
                this.discountDesc = res.data.discountDesc
                this.courseDetail = res.data.courseDetail
                this.dataAll = res.data
            })
        },
        components:{
            commen,
        }
    }

</script>

<style scoped lang="less">
    .top {
        width: 1200px;
        margin: auto;
        height: 271px;
        box-sizing: border-box;
        background-color: white;
        padding: 20px;
        padding-bottom: 0px;
        margin-bottom: 20px;

        .titleImg {
            height: 220px;
            width: 330px;
            float: left;
            margin-right: 50px;
        }

        .topMiddle {
            float: left;

            h1 {
                font-weight: 400;
                font-size: 24px;
                height: 36px;
                line-height: 36px;
                margin: 10px 0px;

            }

            h6 {
                font-weight: 400;
                font-size: 14px;
                color: rgb(153, 153, 153);

                div,
                span {
                    float: left;
                }

                /*i {*/
                /*    font-size: 33px!important;*/
                /*}*/
            }

            .free {
                font-size: 24px;
                color: rgb(0, 207, 140);
                height: 36px;
                line-height: 36px;
            }

            .unFree > span:first-child {
                font-size: 24px;
            }

            .unFree > span:last-child {
                font-size: 14px;
                color: rgb(255, 79, 35);
                text-decoration: line-through;
                padding: 15px;
            }

            /*    限时钜惠*/

            .discountDesc {
                font-size: 12px;
                height: 20px;
                padding: 0px 7px;
                line-height: 20px;
                border: 1px solid rgb(250, 140, 22);
                width: 48px;
                background-color: #fdeed5 !important;
                color: rgb(250, 140, 22);
                margin-top: 10px;
            }

            .buyButton > button {
                height: 45px;
                width: 130px;
                padding: 0px 15px;
                margin-right: 10px;
                text-align: center;
                color: white;
                border: none;
                margin-top: 10px;
                font-size: 18px;
            }

            .greenColor {
                background-color: rgb(0, 168, 121);
            }

            .orignColor {
                background-color: rgb(255, 128, 0);
            }
        }
    }

    .bottom {
        width: 1200px;
        margin: auto;
        margin-top: 20px;
        background-color: white;

        .bottomIn {
            padding-left: 15px;
        }

        .detailedText {
            padding: 20px;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
        }

        .bigTitle {
            margin-left: 4px;
            padding: 0px 30px;

            button {
                background-color: #23b5e2;
                border: none;
                width: 80px;
                height: 30px;
                font-weight: 500;
                line-height: 30px;
                color: white;
                float: right;
            }
        }

        .bigTitle > span {
            font-size: 22px;
            height: 33px;
            line-height: 33px;
            color: rgba(0, 0, 0, 0.99);
        }

        .smallTitle {
            padding: 10px 20px;
            margin: 10px;
            height: 30px;
            background-color: #efefef;
            color: #727272;
            font-size: 14px;
            line-height: 30px;
        }
    }

/*    防止内容太少导致浏览器下方白框*/
    .detailedText,
    .catalogue {
        min-height: 235px;
        padding: 20px;
    }


</style>